<template>
  <div class="custom-card">
    <a-card :bordered="false">
      <div slot="title">
        <span>报名费用信息</span>
        <a-tag v-if="registrationInfo.refundStatus == RefundStatusEnum.REFUNDED" color="red" class="_ml-16">
          已原路退回
        </a-tag>
      </div>
      <a-table :columns="columns" :data-source="[
        {
          ticketName: registrationInfo.ticketName,
          price: registrationInfo.price,
          num: registrationInfo.num,
          discountMoney: registrationInfo.discountMoney,
          payMoney: registrationInfo.payMoney,
          payTime: registrationInfo.payTime,
          outTradeNo: registrationInfo.outTradeNo,
          orderCode: registrationInfo.orderCode,
          refundStatus: registrationInfo.refundStatus
        }
      ]" :pagination="false">
        <div slot="discountMoney" slot-scope="text">
          <a-popover v-if="registrationInfo.discountMoney">
            <template slot="content">
              <div style="width: 700px;">
                <a-table :columns="discountDetailColumns" :data-source="[
                  {
                    tagName: registrationInfo.tagName,
                    desc: `${registrationInfo.tagName}价${registrationInfo.discountPrice}元`,
                    discountPrice: registrationInfo.discountMoney
                  }
                ]" :pagination="false">
                </a-table>
              </div>
            </template>
            {{ text }}
            <a-icon type="question-circle" style="color:#165DFF" />
          </a-popover>
          <template v-else>{{ text }}</template>
        </div>
        <div slot="refundStatus">
          {{ refundStatusText }}
          <a-icon v-if="registrationInfo.refundStatus == RefundStatusEnum.REFUND_FAILED" type="question-circle"
            style="color:#165DFF" />
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { RefundStatusEnum } from "@/enums/activity.js";
const columns = [
  {
    title: '报名类型',
    dataIndex: 'ticketName',
    key: 'ticketName'
  },
  {
    title: '单价（元）',
    dataIndex: 'price',
    key: 'price'
  },
  {
    title: '数量',
    dataIndex: 'num',
    key: 'num',
    ellipsis: true
  },
  {
    title: '优惠减免（元）',
    dataIndex: 'discountMoney',
    key: 'discountMoney',
    ellipsis: true,
    scopedSlots: { customRender: 'discountMoney' }
  },
  {
    title: '实付款（元）',
    dataIndex: 'payMoney',
    key: 'payMoney',
    ellipsis: true
  },
  {
    title: '支付时间',
    dataIndex: 'payTime',
    key: 'payTime',
    ellipsis: true
  },
  {
    title: '支付单号',
    dataIndex: 'outTradeNo',
    key: 'outTradeNo',
    ellipsis: true
  },
  {
    title: '订单号',
    dataIndex: 'orderCode',
    key: 'orderCode',
    ellipsis: true
  },
  {
    title: '售后',
    dataIndex: 'refundStatus',
    key: 'refundStatus',
    ellipsis: true,
    scopedSlots: { customRender: 'refundStatus' }
  }
]

const discountDetailColumns = [
  {
    title: '优惠类型',
    dataIndex: 'tagName',
    key: 'tagName '
  },
  {
    title: '优惠内容',
    dataIndex: 'desc',
    key: 'desc'
  },
  {
    title: '优惠金额（元）',
    dataIndex: 'discountPrice',
    key: 'discountPrice',
    ellipsis: true
  }
]

// 购票信息
export default {
  props: {
    registrationInfo: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    refundStatusText() {
      const refundStatusText = this.Dict.getLocal('RefundStatusEnumDict').find(
        item => item.dictValue == this.registrationInfo.refundStatus
      )
      if (!refundStatusText) return '无'
      return refundStatusText.afterSales
    }
  },
  data() {
    return {
      RefundStatusEnum,
      data: [],
      columns,
      discountDetailColumns
    }
  }
}
</script>
